<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>一个重要的内置关系</title>
  <script src="../js/vue.js"></script>
</head>
<body>
  <!-- 
    1.一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
    2.为什么要有这个关系：让组件实例对象（vc）可以访问到Vue原型上的属性、方法。
   -->
  <!-- 准备好一个容器 --> 
  <div id="root">
    <school></school>
    <hello></hello>
  </div>
  <script>
    Vue.config.productionTip = false; // 阻止vue在启动时生成生产提示。

    Vue.prototype.x = 99;

    // 定义一个构造函数
    function Demo() {
      this.a = 1
      this.b = 2
    }
    // 创建一个Demo的实例对象
    const d = new Demo()
    // **实例的隐式原型属性永远指向自己缔造者的原型对象**
    console.log(Demo.prototype) // 显示原型属性（函数有）
    console.log(d.__proto__) // 隐式原型属性（实例有）  // 它们都指向一个原型对象
    console.log(Demo.prototype === d.__proto__)
    // 程序员通过显示原型属性操作原型对象，追加一个x属性，值为99
    Demo.prototype.x = 99
    console.log(d.__proto__.x, d.x)

    // 定义student组件
    const student = Vue.extend({
      template: `
        <div>
          <h2>学生名称：{{studentName}}</h2>
          <h2>学生年龄：{{age}}</h2>
        </div>
      `,
      data() {
        return {
          studentName: '张三',
          age: 18
        }
      }
    })

    // 定义school组件
    const school = {
      name: 'xuexiao',
      template: `
        <div>
          <h2>学校名称：{{schoolName}}</h2>
          <h2>学校地址：{{address}}</h2>
          <button @click="showName">点我提示学校名</button>
          <student></student>
        </div>
      `,
      components: {student},
      data() {
        return {
          schoolName: '学校名称',
          address: '学校地址'
        }
      },
      methods: {
        showName() {
          console.log(this, this.x)
        }
      }
    }

    // 定义hello组件
    const hello = Vue.extend({
      template: `<div>{{msg}}</div>`,
      data() {
        return {
          msg: 'hello Vue!'
        }
      }
    })
    // school.a = 99
    // console.log(school === hello)
    // console.log(school.a)
    // console.log(hello.a)
    // 创建vm
    const vm = new Vue({
      el: "#root",
      // 第二部：注册组件（局部组件）
      components: {school, hello}
    })
    console.log(hello.prototype.__proto__ === Vue.prototype)
  </script>
</body>
</html>